<template>
    <div ref="myChart"/>
</template>

<script>

export default {
    name: "Histogram",
    data: function () {
        return {
            seriesArray: []
        }
    },
    methods: {
        initSeries(optionData) {
            let _this = this;
            optionData.legendData.forEach((item, index) => {
                _this.seriesArray.push({
                    name: item,
                    type: 'bar',
                    data: optionData.seriesData[index],
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#33EEFF',
                            }, {
                                offset: 1,
                                color: '#198BFC',
                            }])
                        }
                    }
                })
            })

            let myChart = _this.$root.$echarts.init(_this.$refs.myChart);
            let option;

            option = {
                backgroundColor: 'rgba(11,32,53,0)',
                textStyle: {
                    color: '#ffffff',
                    opacity: 0.85
                },
                title: {
                    text: optionData.titleText,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '26px',
                        opacity: 1
                    },
                    // subtext: '数据来自网络'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: optionData.legendData,
                    top: 'bottom',
                    itemWidth: 20,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16,
                        opacity: 0.85
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '8%',
                    top: '70',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: optionData.xAxisData,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    name: optionData.yAxisName,
                    nameTextStyle: {
                        align: "center",
                        color: '#ffffff',
                        fontSize: 16,
                        opacity: 0.85
                    },
                },
                dataZoom: [{
                    type: "inside"
                }],
                series: _this.seriesArray
            };

            option && myChart.setOption(option);
        }
    }
}
</script>

<style scoped>
</style>